<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>话题详情</title>
    <meta name="description" content="">
    <meta name="author" content="">
	
	<!--<link href="css/bootstrap.min.css" rel="stylesheet">
     
    <link href="css/templatemo_justified.css" rel="stylesheet"> -->
     <!--HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    
    <!--<script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>-->
	
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/templatemo_justified.css" />
	<script src="<%=request.getContextPath() %>/resources/js/index/html5shiv.js"></script>
	<script src="<%=request.getContextPath() %>/resources/js/index/respond.min.js"></script>
    <script    src="<%=request.getContextPath() %>resources/js/echarts/echarts.js"></script>
  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
	//路径配置
	require.config({
	    paths: {
	        echarts: 'http://echarts.baidu.com/build/dist'
	    }
	});

	// 使用
	require(
	    [
	        'echarts',
	        'echarts/chart/map', 
	        'echarts/chart/line',
	        'echarts/chart/bar',
	         'echarts/chart/pie' 
	        // 使用柱状图就加载bar模块，按需加载
	    ],
	    function (ec) {
	        // 基于准备好的dom，初始化echarts图表
	        var myChart = ec.init(document.getElementById('map1')); 
	        var myChart1 = ec.init(document.getElementById('bo1')); 
	        var myChart2 = ec.init(document.getElementById('place1')); 
	        var myChart3 = ec.init(document.getElementById('person1')); 
	        var myChart4 = ec.init(document.getElementById('org1')); 
	        var option = {
		    tooltip : {
		        trigger: 'item'
		    },
		    dataRange: {
		        min: 0,
		        max: 2500,
		        x: 'left',
		        y: 'bottom',
		        text:['高','低'],           // 文本，默认为数值文本
		        calculable : true
		    },
		    toolbox: {
		        show : true		    
		    },
		    series : [
		        {
		            name: '相关新闻',
		            type: 'map',
		            mapType: 'china',
		            roam: true,
		            itemStyle:{
		                normal:{label:{show:true}},
		                emphasis:{label:{show:true}}
		            },
		            data:[
		                {name: '北京',value: Math.round(Math.random()*1000)},
		                {name: '天津',value: Math.round(Math.random()*1000)},
		                {name: '上海',value: Math.round(Math.random()*1000)},
		                {name: '重庆',value: Math.round(Math.random()*1000)},
		                {name: '河北',value: Math.round(Math.random()*1000)},
		                {name: '河南',value: Math.round(Math.random()*1000)},
		                {name: '云南',value: Math.round(Math.random()*1000)},
		                {name: '辽宁',value: Math.round(Math.random()*1000)},
		                {name: '黑龙江',value: Math.round(Math.random()*1000)},
		                {name: '湖南',value: Math.round(Math.random()*1000)},
		                {name: '安徽',value: Math.round(Math.random()*1000)},
		                {name: '山东',value: Math.round(Math.random()*1000)},
		                {name: '新疆',value: Math.round(Math.random()*1000)},
		                {name: '江苏',value: Math.round(Math.random()*1000)},
		                {name: '浙江',value: Math.round(Math.random()*1000)},
		                {name: '江西',value: Math.round(Math.random()*1000)},
		                {name: '湖北',value: Math.round(Math.random()*1000)},
		                {name: '广西',value: Math.round(Math.random()*1000)},
		                {name: '甘肃',value: Math.round(Math.random()*1000)},
		                {name: '山西',value: Math.round(Math.random()*1000)},
		                {name: '内蒙古',value: Math.round(Math.random()*1000)},
		                {name: '陕西',value: Math.round(Math.random()*1000)},
		                {name: '吉林',value: Math.round(Math.random()*1000)},
		                {name: '福建',value: Math.round(Math.random()*1000)},
		                {name: '贵州',value: Math.round(Math.random()*1000)},
		                {name: '广东',value: Math.round(Math.random()*1000)},
		                {name: '青海',value: Math.round(Math.random()*1000)},
		                {name: '西藏',value: Math.round(Math.random()*1000)},
		                {name: '四川',value: Math.round(Math.random()*1000)},
		                {name: '宁夏',value: Math.round(Math.random()*1000)},
		                {name: '海南',value: Math.round(Math.random()*1000)},
		                {name: '台湾',value: Math.round(Math.random()*1000)},
		                {name: '香港',value: Math.round(Math.random()*1000)},
		                {name: '澳门',value: Math.round(Math.random()*1000)}
		            ]
		        }
		    ]
};
	    var option1 = {
                //数据提示框配置  
                tooltip: {  
                    trigger: 'item' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框  
                },  
                grid:{x:45, y:10,x2:10,y2:20},
                calculable: true,  
                //轴配置  
                xAxis: [  
                        {  
                            type: 'category',
                           // data:[{value:"${year}"+"-"+"${month}"+"-"+"${date}"}],
                           data: ['2016-4-5', '2016-06-05', '2016-06-10', '2016-06-15', '2016-06-20', '2016-06-25', '2016-06-30', '2016-07-05', '2016-07-10','2016-07-15', '2016-07-20'],  
                        }  
                    ],  
                //Y轴配置  
                yAxis: [  
                        {  
                            type: 'value',  
                          //  splitArea: { show: true },  
                         //   name:"数值"  
                        }  
                    ],  
                //图表Series数据序列配置  
               /*  series: []
                }; */
                 series: [  
                        {  
                            type: 'line',
                             smooth:true,
                             itemStyle: {normal: { areaStyle: {type: 'default'}} },
                            // data:[{value:"${integerlist[i]}"}],
                            data: [ 500, 100, 1000, 2500, 2000, 1000, 200, 1000, 500, 500, 2000,100]  
                        }
                    ]  
            };  
/* $ajax({
url: basePath+"",
type :'get',
dataType:'json',
success : function(date){
	 var Item =function(){
		 return{
		 name:'意向',
		 type:'line',
		 smooth:true,
		 itemStyle: {normal:{areaStyle:{type: 'default'}}},
		 data:[]
		 }
	 };
	 var indexNewstimeNum =date.indexNewstimeNum;
	 var series = [];
	 for(var i=0;i<date.length;i++){
		  var tp=new Item();
		  tp.name=startime[i];
		  tp.data=function(){
		  var list =[];
		  var tpl = indexNewstimeNum[i];
		  for(var k=0,klen =tpl.length;k<klen;k++){
		      list.push(topl[k].orders);
		  }
		   return list;
		  }();
		  series.push(tp);
		 }
		 
	 option1.xAxis.data =indexNewstimeNum;
	 option1.series = series;
	 myChart1.setOption(option1);
	}

}) ; */                
            var option2 = {
			    tooltip : {
			        trigger: 'item'
			    },
			    grid:{
               x:35,
               y:10,
               x2:10,
               y2:20
               },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'value',
			            boundaryGap : [0, 0.01]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'category',
			            data : ['巴西','印尼','美国','印度','中国','世界']
			        }
			    ],
			    series : [
			        {
			            type:'bar',
			            data:[100, 200, 500, 550, 600, 600]
			        }
			    ]
			};
			 var option3 = {
			    tooltip : {
			        trigger: 'item'
			    },
			    grid:{
               x:35,
               y:10,
               x2:10,
               y2:20
               },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'value',
			            boundaryGap : [0, 0.01]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'category',
			            data : ['巴西','印尼','美国','印度','中国','世界']
			        }
			    ],
			    series : [
			        {
			            type:'bar',
			            data:[100, 200, 500, 550, 600, 600]
			        }
			    ]
			};
			 var option4 = {
					    tooltip : {
					        trigger: 'item'
					    },
					    grid:{
		               x:35,
		               y:10,
		               x2:10,
		               y2:20
		               },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'value',
					            boundaryGap : [0, 0.01]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'category',
					            data : ['巴西','印尼','美国','印度','中国','世界']
					        }
					    ],
					    series : [
					        {
					            type:'bar',
					            data:[100, 200, 500, 550, 600, 600]
					        }
					    ]
					};     
	        // 为echarts对象加载数据 
	        myChart.setOption(option); 
	        myChart1.setOption(option1); 
	        myChart2.setOption(option2); 
	        myChart3.setOption(option3); 
	        myChart4.setOption(option4); 
	    }
	);
</script>
	<script type="text/javascript">

	function PageCallback(index) { 
		window.location.href="<%=request.getContextPath() %>/topic/topicPage?page="+(index+1);
	}
	$(document).ready(function() {
		var id = 0;
		$("#Pagination").pagination("${page.totalPage }",{
			current_page:"${page.currentPage-1}",
			callback: PageCallback
		});
	});
	</script>
  </head>

  <body class="topic" >
   
    
   
    <div id="container" class="container"  style="float: left">
        
        <img
			src="<%=request.getContextPath()%>/resources/images/templatemoheader.jpg"
			class="img-responsive" />

        
       
        <ul class="nav nav-justified">
        
        <li ><a href="/mwyqMonitor/topic/" class="meng">首页&nbsp;&nbsp;&nbsp;</a></li>
        <li ><a href="/mwyqMonitor/news/" class="meng" >实时热点&nbsp;</a></li>
        <li> <a href="/mwyqMonitor/topic/" class="meng" >敏感事件&nbsp;</a></li>
        <li ><a href="/mwyqMonitor/topic/" class="meng">统计分析&nbsp;</a></li>
        <li><a href="#" class="sub meng" >自定义检测</a> </li>
        </ul> 
         <div class="row space29 bd" style="padding-left: 20px; height:700px;"> <!-- row 1 begins -->
      <div class="col-md-3 bd" style="width: 1.5%;">
           <div class="meng" ><input type="button" value="搜索" style="height:100px; width:50px; margin-top: 10%; background-color: #cdcdcd; float:left" /></div>
    	   <div class="meng"><input type="text" style=" height:400px; margin-top:auto; width:50px;float:left"/></div>
    </div>
     <div class="col-md-15 meng bd" style="width: 1.5%;float: left;margin-left: 5px; margin-right: 5px;">
	 <h3 class="page-header">新京报快讯</h3>
	 </div>
    <div class="col-md-10 bd" style="width: 96.5%;height:700px; float: left;">
       <div class="col-md-12 bd">
       <div class="col-md-13 bd">
       <div class="new-des  bd">
<div class="panel panel-default" >
<div class="panel-heading" style="padding:5px 5px; height:50px;">
<div class="main-news-title" >
     <span id="mainnew_title">
        话题下有：
         <span id="huatishu" class="font_news">16</span>
         篇新闻，
         <span id="numplace" class="font_loc">20</span>
         个地点实体，
         <span id="numper" class="font_per">20</span>
          个人物实体，
          <span id="numorg" class="font_org">20</span>
          个组织机构实体 
     <p></p> 
      </span>
     </div>
</div>
<div class="panel-body1 meng" style="font-family:Mongolian Baiti81;moz-writing-mode: vertical-lr;
			writing-mode: vertical-lr;
			-webkit-writing-mode: vertical-lr;
			-o-writing-mode: vertical-lr;
			-ms-writing-mode: tb-lr; writing-mode: tb-lr">

<c:forEach items="${topicNews }" var="topicNews">
<p>
	<fmt:formatDate value="${topicNews.news_time}" type="date" pattern="yyyy-MM-dd"/></p>
<p>${topicNews.news_author}</p>
<p id="huatixia" class="huatixia">
	${topicNews.news_content} </p>
</c:forEach>
</div>
</div>
</div>
       </div>
        <div class="col-md-14 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading">
话题地图
</div>
<div id="map1" class="panel-body1" >

</div>
</div>
</div>
       </div>
       <div class="col-md-13 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
词云
</div>
<div id="ciyun" class="panel-body1" >

</div>
</div>
</div>
       </div>
       <div class="col-md-14 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
地点统计
</div>
<div id="place1" class="panel-body1" >

</div>
</div>
</div>
       </div>
       <div class="col-md-13 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
新闻列表
</div>
<div class="panel-body1 meng"  style="font-family:Mongolian Baiti81;moz-writing-mode: vertical-lr;
			writing-mode: vertical-lr;
			-webkit-writing-mode: vertical-lr;
			-o-writing-mode: vertical-lr;
			-ms-writing-mode: tb-lr; writing-mode: tb-lr">
<c:forEach items="${topicAllNews }" var="topicAllNews">
<div  class="newslist bd">
<p id="newstitle">
<a href="<%=request.getContextPath()%>/topic/${topicAllNews.news_id }/newsContent">
${topicAllNews.news_title }</a>
<small id="time" class="pull-right text-muted meng" >
<fmt:formatDate value="${topicAllNews.news_time}" type="date" pattern="yyyy-MM-dd"/>
</small> </p>
</div>
</c:forEach>
</div>
</div>
</div>
       </div>
       </div>
       <div class="col-md-12 bd">
       <div class="col-md-13 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
实体关系
</div>
<div id="shiti" class="panel-body1" >

</div>
</div>
</div>
       </div>
       <div class="col-md-14 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
新闻趋势
</div>
<div id="bo1" class="panel-body1" >

</div>
</div>
</div>
       </div>
       <div class="col-md-13 bd">
       <div class="new-des  bd" >
<div class="panel panel-default">
<div class="panel-heading">
摘要
</div>

<div class="panel-body1 meng" style="font-family:Mongolian Baiti81;moz-writing-mode: vertical-lr;
			writing-mode: vertical-lr;
			-webkit-writing-mode: vertical-lr;
			-o-writing-mode: vertical-lr;
			-ms-writing-mode: tb-lr; writing-mode: tb-lr">
<p class="zhaiyao" id="zhaiyao">
话题的摘要
</p>
<c:forEach items="${topicNews }" var="topicNews">
<p id="huatixia" class="huatixia">
	${topicNews.news_content} </p>
</c:forEach>
</div>

</div>
</div>
       </div>
       <div class="col-md-14 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
人物统计
</div>
<div id="person1" class="panel-body1" >

</div>
</div>
</div>
       </div>
       <div class="col-md-13 bd">
       <div class="new-des  bd">
<div class="panel panel-default">
<div class="panel-heading ">
组织机构统计
</div>
<div id="org1" class="panel-body1" >

</div>
</div>
</div>
       </div>
      </div>
    </div>
    </div>
            <div class="footer">
        <p style="text-align: center;">Copyright © 2016 中央民族大学</p>
      </div>
<!-- /container -->
 </div>
  </body>
</html>